<template>
  <div class="flex cert-list-filter gap-x-4">
    <section class="whitespace-nowrap">
      <el-button type="primary" @click="handleCommon('apply_cert')">
        <app-icon name="add" class="mr-[6px]"></app-icon>
        申请证书
      </el-button>
      <el-button plain type="primary" @click="handleCommon('batch_apply_cert')">
        批量申请
      </el-button>
      <el-divider direction="vertical" class="mx-4" />
      <el-button plain @click="handleCommon('self_sign')"> 自签证书 </el-button>
      <el-button plain @click="handleCommon('add_acme')">Acme账户</el-button>
      <el-button plain @click="handleCommon('add_dns')">DNS账户</el-button>
    </section>
    <section class="whitespace-nowrap">
      <el-select
        v-model="state.provider"
        placeholder="请选择"
        class="w-[220px]"
      >
        <el-option
          v-for="item in [
            { label: '全部申请方式', value: '' },
            ...applyMethodOptions
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="state.status"
        placeholder="请选择"
        class="w-[220px] mx-4"
      >
        <el-option
          v-for="item in [
            { label: '全部状态', value: '' },
            ...certStatusOptions
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        v-model="state.domain_keyword"
        placeholder="请输入域名"
        clearable
        class="w-[220px] no-suffix"
        @clear="() => emit('refresh')"
        @keyup.enter="() => emit('refresh')"
      >
        <template #append>
          <app-icon
            name="search"
            class="w-[14px]"
            @click="emit('refresh')"
          ></app-icon>
        </template>
      </el-input>
    </section>
    <!-- 申请证书 -->
    <apply-cert
      v-model:visible="certState.visible"
      v-model:loading="certState.loading"
      @refresh="emit('refresh')"
      @refresh-row="row => emit('refresh-row', row)"
    />
    <!-- 批量申请 -->
    <batch-apply-cert
      v-model:visible="batchCertState.visible"
      v-model:loading="batchCertState.loading"
      @refresh="emit('refresh')"
    />
    <!-- 自签证书 -->
    <self-sign-cert
      v-model:visible="selfSignState.visible"
      @refresh="emit('refresh')"
    />
    <!-- acme账户 -->
    <acme-account
      v-model:visible="acmeState.visible"
      @refresh="emit('refresh')"
    />
    <!-- dns账户 -->
    <dns-account
      v-model:visible="dnsState.visible"
      @refresh="emit('refresh')"
    />
  </div>
</template>

<script setup lang="ts">
import type { CertModel } from '@/apis/model/cert'
import { applyMethodOptions, certStatusOptions } from '@/config/constant/cert'

import AcmeAccount from '../components/AcmeAccount/index.vue'
import DnsAccount from '../components/DnsAccount/index.vue'
import type { ICertFormState, ICommonType } from '../type'
import ApplyCert from './ApplyCert.vue'
import BatchApplyCert from './BatchApplyCert.vue'
import SelfSignCert from './SelfSignCert/SelfSignCert.vue'

interface IEmits {
  // (event: 'click', { type, value }: ISearchFilterClickParams): void
  (event: 'search', value: ICertFormState): void
  (event: 'refresh'): void
  (event: 'update:modelValue', value: ICertFormState): void
  (event: 'clear-select-ids'): void
  (event: 'refresh-row', value: CertModel): void
}
const emit = defineEmits<IEmits>()

interface IProps {
  loading: boolean
  joinGroupDisabled: boolean
  modelValue: ICertFormState
}

const props = defineProps<IProps>()

const certState = reactive({
  visible: false,
  loading: false
})
const batchCertState = reactive({
  visible: false,
  loading: false
})
const selfSignState = reactive({
  visible: false,
  loading: false
})
const acmeState = reactive({
  visible: false,
  loading: false
})
const dnsState = reactive({
  visible: false,
  loading: false
})
const state = computed(() => props.modelValue)
// const desRef = ref()
// const { fetchFn: desFetch } = useSearch('remark', domainListApi, {
//   domRef: desRef
// })

// const {
//   loading: domainLoading,
//   remoteMethod: domainRemoteMethod,
//   opts: domainOpts
// } = useSelectRemote(domainListApi, {
//   valueKey: 'name',
//   labelKey: 'name',
//   queryKey: 'name'
// })

// domainRemoteMethod('')

function handleCommon(type: ICommonType) {
  if (type === 'apply_cert') {
    certState.visible = true
  } else if (type === 'batch_apply_cert') {
    batchCertState.visible = true
  } else if (type === 'self_sign') {
    selfSignState.visible = true
  } else if (type === 'add_acme') {
    acmeState.visible = true
  } else if (type === 'add_dns') {
    dnsState.visible = true
  }
}
watch(
  pickReactive(state.value, ['provider', 'status', 'domain_keyword']),
  () => {
    emit('clear-select-ids')
    useAppStore().setCertFilterState({
      ...pickReactive(state.value, ['provider', 'status', 'domain_keyword'])
        .value
    })
  },
  {
    immediate: true
  }
)
watch(
  omitReactive(state.value, ['limit', 'offset', 'domain_keyword']),
  () => emit('refresh'),
  {
    immediate: true
  }
)
</script>

<style scoped lang="scss">
.el-form {
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
.cert-list-filter {
  @apply flex items-center justify-between;
}
</style>
